<template>
  <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
    <slot></slot>
  </Scrollbar>
</template>

<script lang="ts">
import { defineComponent, ref, unref, nextTick } from 'vue'
import { Scrollbar, ScrollbarType } from '@/components/Scrollbar'
import { useScrollTo } from '@/hooks/event/useScrollTo'

export default defineComponent({
  name: 'ScrollContainer',
  components: { Scrollbar },
  setup() {
    const scrollbarRef = ref<Nullable<ScrollbarType>>(null)

    /**
     * Scroll to the specified position
     */
    function scrollTo(to: number, duration = 500) {
      const scrollbar = unref(scrollbarRef)
      if (!scrollbar) {
        return
      }
      nextTick(() => {
        const wrap = unref(scrollbar.wrap)
        if (!wrap) {
          return
        }
        const { start } = useScrollTo({
          el: wrap,
          to,
          duration,
        })
        start()
      })
    }

    function getScrollWrap() {
      const scrollbar = unref(scrollbarRef)
      if (!scrollbar) {
        return null
      }
      return scrollbar.wrap
    }

    /**
     * Scroll to the bottom
     */
    function scrollBottom() {
      const scrollbar = unref(scrollbarRef)
      if (!scrollbar) {
        return
      }
      nextTick(() => {
        const wrap = unref(scrollbar.wrap) as any
        if (!wrap) {
          return
        }
        const scrollHeight = wrap.scrollHeight as number
        const { start } = useScrollTo({
          el: wrap,
          to: scrollHeight,
        })
        start()
      })
    }

    return {
      scrollbarRef,
      scrollTo,
      scrollBottom,
      getScrollWrap,
    }
  },
})
</script>
<style lang="less">
.scroll-container {
  width: 100%;
  height: 100%;

  .scrollbar__wrap {
    margin-bottom: 18px !important;
    overflow-x: hidden;
  }

  .scrollbar__view {
    box-sizing: border-box;
  }
}
</style>
